<!--
 * @Description: 更多
 * @Author 卞鹏飞 <228443632@qq.com>
 * @create 06/08/24 3:32 PM
 -->
<!--setup-->
<script setup>
import { getCurrentInstance, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useStorage } from '@vueuse/core'
import { stringPathJoin } from 'sf-utils2'

const { proxy } = getCurrentInstance()
const props = defineProps({})
const emit = defineEmits([])

/* 状态 */
const route = useRoute()
const state = useStorage('demo', [])

/* 方法 */

/* 计算 */

/* 监听 */

// 监听路由变化
watch(
  route,
  (newRoute) => {
    const parentRoute = newRoute?.matched?.at(-2) || newRoute
    const parentPath = stringPathJoin(parentRoute.path, '/')
    if (!newRoute.path.startsWith(parentPath)) {
      return
    }

    const tabOptions = { key: newRoute.fullPath, fullPath: newRoute.fullPath, title: newRoute?.meta?.title }
    const newRouteMeta = newRoute?.meta || {}

    // 如果是分组路由
    if (newRouteMeta?.group === true) {
      state.value.push(tabOptions)
    }
  },
  { immediate: true }
)

/* 周期 */

/* 暴露 */
defineExpose({
  $: proxy.$
})
</script>

<!--render-->
<template>
  <div class="page flex-center">
    <el-empty description="访问的页面不存在" />
  </div>
</template>

<!--style-->
<style scoped lang="less">
.page {
  height: 100%;
  background: #fff;
}
</style>
